<template>
  <div class="data-course">
    <div class="data-course-filter">
      <div style="margin-top:20px;">
        <span>关键词</span>
        <el-select v-model="indentity" style="width:165px;" @change="handleFilter">
          <el-option
            v-for="item in indentitys"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="content" style="width:200px" placeholder="请输入内容" @keyup.enter.native="handleFilter" />
        <el-button type="primary" style="margin-left:10px;" plain @click="handleFilter">搜索</el-button>
        <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        <el-button :loading="downloadLoading" type="primary" plain @click="handleExport">导出</el-button>
      </div>
    </div>
    <el-divider content-position="left">未提现总额：{{ totalUndisclosedAmount }} 元 （含待审核）已提现总额：{{ totalAmountSubmitted }} 元</el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="customer" label="代理商编号号" min-width="10" align="center">
        <template slot-scope="scope">
          <span>{{ (currentpage - 1) * pagesize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="机构/个人名称" min-width="10" align="center"/>
      <el-table-column prop="phone" label="联系手机" min-width="10" align="center"/>
      <el-table-column prop="noExtractPrice" label="未提现金额(含待审核)" min-width="10" align="center"/>
      <el-table-column prop="extractPrice" label="已提现金额" min-width="10" align="center"/>
      <el-table-column prop="lastExtractPrice" label="最后提现金额" min-width="10" align="center"/>
      <el-table-column prop="extractNum" label="成功提现次数" min-width="10" align="center"/>
      <el-table-column prop="manage" label="操作" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">提现记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog :visible.sync="tableDialogVisible" width="50%">
      <el-table :data="tableDialogData" style="width: 100%">
        <el-table-column prop="billNum" label="提现单号" min-width="10" align="center"/>
        <el-table-column prop="distributorName" label="代理商名称" min-width="10" align="center"/>
        <el-table-column prop="price" label="提现金额" min-width="10" align="center"/>
        <el-table-column prop="createTimeStr" label="申请时间" min-width="10" align="center"/>
        <el-table-column prop="examineTimeStr" label="审核时间" min-width="10" align="center"/>
        <el-table-column prop="status" label="审核状态" min-width="10" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | statusFilter }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="dialogTotal"
        :current-page="dialogCurrentpage"
        :page-size="dialogPagesize"
        @handleSizeChange="dialogHandleSizeChange"
        @handleCurrentChange="dialogHandleCurrentChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getAgencyManage } from '@/api/distribution/agencymanage'
import { getCashWithdrawalRecord } from '@/api/distribution/agencyCashManage'
import { getTenantId } from '@/utils/auth'
export default {
  components: {
    Pagination
  },
  filters: {
    statusFilter(item) {
      const statusMap = {
        'audit': '待审核',
        'passed': '已通过',
        'noPassed': '未通过'
      }
      return statusMap[item]
    }
  },
  data() {
    return {
      total: 0,
      currentpage: 1,
      pagesize: 10,
      downloadLoading: false,
      dialogTotal: 0,
      dialogCurrentpage: 1,
      dialogPagesize: 10,
      content: '',
      indentity: '',
      indentitys: [
        {
          label: '机构/个人名称',
          value: 'name'
        },
        {
          label: '联系手机',
          value: 'phone'
        }
      ],
      totalUndisclosedAmount: 0.00,
      totalAmountSubmitted: 0.00,
      tableData: [],
      filterData: [],
      // 表格弹框数据
      tableDialogData: [],
      // 表格信息弹框
      tableDialogVisible: false
    }
  },
  created() {
    this.getData()
  },
  updated() {
    this.statusfil()
  },
  methods: {
    statusfil() {
      let totalUndisclosedAmount = 0
      let totalAmountSubmitted = 0
      this.tableData.map(item => {
        if (item.type === '未提现') totalUndisclosedAmount += item.noExtractPrice
        if (item.type === '已提现') totalAmountSubmitted += item.extractPrice
      })
      this.totalUndisclosedAmount = totalUndisclosedAmount
      this.totalAmountSubmitted = totalAmountSubmitted
    },
    getData() {
      getAgencyManage(getTenantId()).then(res => {
        this.tableData = res.data.items
        this.filterData = res.data.items
        this.total = res.data.items.length
      })
    },
    handleFilter() {
      this.tableData = this.filterData.filter(item => {
        if (this.indentity === 'name' && item.name.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        if (this.indentity === 'phone' && item.phone.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        return true
      })
      this.total = this.tableData.length
    },
    clearParams() {
      this.indentity = ''
      this.content = ''
      this.getData()
    },
    handleClick(row) {
      this.tableDialogVisible = true
      getCashWithdrawalRecord(row.id).then(res => {
        this.tableDialogData = res.data.items
        this.dialogTotal = res.data.items.length
      })
    },
    handleExport() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['机构/个人名称', '联系手机', '未提现金额(含待审核)', '已提现金额', '最后提现金额', '成功提现次数']
        const filterVal = ['name', 'phone', 'noExtractPrice', 'extractPrice', 'lastExtractPrice', 'extractNum']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'accountManageList',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    dialogHandleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    dialogHandleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.data-course {
  padding: 20px;
  &-filter,
  &-keyword {
    width: 100%;
    font-size: 14px;
    color: #606266;
    margin: 15px 0;
    span {
      margin: 10px 0;
    }
    .keyword {
      display: inline-block;
      width: 56px;
      text-align: right;
    }
  }
}
</style>
